<template>
  <div class="container">
    <!-- 表单 -->
    <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
      <!-- 所属学科 -->
      <el-form-item label="所属学科" v-if="!$route.query.id" prop="subjectID">
        <el-select
          v-model="formData.subjectID"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in subjectName"
            :key="item.id"
            :label="item.subjectName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <!-- 目录名称 -->
      <el-form-item label="目录名称" style="width: 100%" prop="directoryName">
        <el-input v-model="formData.directoryName" />
      </el-form-item>
    </el-form>

    <el-row slot="footer" type="flex" justify="end">
      <el-col :span="24" style="text-align: right; margin-top: 30px">
        <el-button size="small" @click="btnCancel">取消</el-button>
        <el-button size="small" type="primary" @click="confirmBtn"
        >确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入 API
import { list } from '@/api/hmmm/subjects.js'
import { add, update } from '@/api/hmmm/directorys.js'

export default {
  name: 'DirectorysAdd',
  props: {
    // 父组件传的当前行的值
    subject: {
      type: Object
    },
    // 是否是编辑
    isEdit: {
      type: Boolean
    }
  },

  data () {
    return {
      // 表单内容
      formData: {
        subjectID: null, // 学科ID
        directoryName: null // 目录名称
      },
      // 校验规则
      rules: {
        // 所属学科规则
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'change' }
        ],
        // 目录名称规则
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },

      // 所属学科列表
      subjectName: []
    }
  },

  created () {
    // 获取学科列表
    this.getSubject()
    // 根据id获取目录详情
    this.getDetail()
    // 调用 判断是否是编辑 的方法
    this.ifEdit()
  },

  methods: {
    // 根据id获取目录详情
    async getDetail () {
      // 给表单赋值
      this.formData.subjectID = this.subject.subjectName
      this.formData.directoryName = this.subject.directoryName
    },

    // 如果是编辑状态
    ifEdit () {
      if (this.isEdit) {
        // 如果是编辑，给表单增加 id 属性
        this.formData.id = this.subject.id
      } else {
      // 将表单清空
        this.formData = {}
      }
    },

    // 获取所属学科列表
    async getSubject () {
      // 发送请求
      const res = await list({ page: 1, pagesize: 1000 })
      // 给学科列表赋值
      this.subjectName = res.data.items
    },

    // 点击取消
    btnCancel () {
      // 清空表单数据
      this.formData = {}
      // 清空表单内容级校验
      this.$refs.form.resetFields()
      // 关闭弹出层
      this.$emit('closeDialog')
    },

    // 点击确定
    confirmBtn () {
      const subjectID = Number(this.$route.query.id)
      // 兜底验证
      this.$refs.form.validate(async (valid) => {
        if (!valid) return

        // 判断是否是编辑
        if (this.isEdit) {
          // true 修改
          // 给表单新增 id 属性
          this.formData.id = this.subject.id
          // 发送请求，表单的内容作为参数
          await update(this.formData)
        } else {
          // false 添加
          // 发送请求，表单的内容作为参数
          await add({ ...this.formData, subjectID })
        }
        // 成功提示
        this.$message.success(this.isEdit ? '修改目录成功' : '添加目录成功')
        // 关闭弹出层，并刷新页面
        this.$emit('closeAndRefresh')
        // 将表单清空
        this.formData = {}
      })
    }
  }
}
</script>

<style scoped lang='less'>
</style>
